<template>
    <el-dialog
               @opened="dialogOpen"
               v-model="dialogFormVisible" :title="props.title">

        <el-form :model="dialogForm">
            <el-form-item label="上传头像" prop="headimgurl">
                <s-upload v-model="dialogForm.headimgurl"></s-upload>
            </el-form-item>
            <el-form-item label="班级" prop="class" :rules="[{ required: true, message: '请输入班级' }]">
                <el-input v-model="dialogForm.class" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
                <el-input v-model="dialogForm.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" prop="age" :rules="[{ required: true, message: '请输入年龄' }]">
                <el-input v-model="dialogForm.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="城市" prop="city" :rules="[{ required: true, message: '请输入城市' }]">
                <el-input v-model="dialogForm.city" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学历" prop="degree" :rules="[{ required: true, message: '请输入学历' }]">
                <el-input v-model="dialogForm.degree" autocomplete="off" />
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl" :rules="[{ required: true, message: '请输入项目地址' }]">
                <el-input v-model="dialogForm.productUrl" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" prop="description" :rules="[{ required: true, message: '请输入描述' }]">
                <el-input v-model="dialogForm.description" autocomplete="off" />
            </el-form-item>



        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="ok">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { reactive, ref, watch, watchEffect } from 'vue'



//引入上传组件

import sUpload from "./sUpload.vue"


//定义组件未来接受的属性

let props = defineProps({
    //弹框的标题
    title: {
        type: String,
        default: '增加学员信息'
    },
    //弹框的操作类型
    action: {
        type: String,
        default: 'add'
    },
    //弹框显示和隐藏
    modelValue: {
        type: Boolean,
        default: false
    },
    //数据回显的字段
    reviewData: {
        type: Object
    }
})

//定义组件将来点击确定和取消触发的方法

let emit = defineEmits(['ok', 'cancel', 'update:modelValue'])

//控制当前组件dialog隐藏和现实的变量
const dialogFormVisible = ref(false)

//侦听父组件传递的props中的dialogVisible变化,变化了就给当前这个组件声明的dialogVisible复制

watch(() => props.modelValue, (newVal) => {
    // console.log(newVal)
    //要判断props中的modelValue是否和当前的dialogFormVisible的值一致
    //如果不一致 才要进行修改
    if (newVal !== dialogFormVisible.value) {
        dialogFormVisible.value = newVal
    }
})



// class	是	班级
// name	是	学员的名字
// age	是	学员的年龄
// city	是	目前居住的城市
// degree	是	学历
// productUrl	是	项目地址
// description	是	一句话对自己的评价
// headimgurl	否	头像

//声明一个响应式变量,存储需要修改的数据的sId

let sId = ref()

const dialogForm = reactive({
    class: "",
    name: "",
    age: "",
    city: "",
    degree: "",
    productUrl: "",
    description: "",
    headimgurl: "2222222"
})


//弹窗打开的事件处理函数

let dialogOpen = () => {
    console.log(props.reviewData)
    //给sId赋值
    sId.value = props.reviewData.sId;
   
    //过滤掉reviewData中的sId和_id
    let keys = Object.keys(props.reviewData)

    let newKeys = keys.filter(key => (key !== 'sId'))
    newKeys = newKeys.filter(key => (key !== '_id'))

    console.log(newKeys)

    newKeys.forEach(key => {
        dialogForm[key] = props.reviewData[key]
    })
}

watchEffect(() => {
    console.log(dialogForm.headimgurl)
})


//声明取消和确定按钮的点击事件

let cancel = () => {
    dialogFormVisible.value = false
    // emit('cancel')
    //这段逻辑是为了更新父组件中的dialogVisible的值
    emit('update:modelValue', dialogFormVisible.value)
}

let ok = () => {
    dialogFormVisible.value = false
    // emit('ok')
    //这段逻辑是为了更新父组件中的dialogVisible的值
    emit('update:modelValue', dialogFormVisible.value)
}



</script>